<template>
  <div class="my-wrap">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <header>
      <p class="title">我的</p>
      <nuxt-link :to="{name:'setting'}" >
        <img src="~/assets/img/my-setting.png" alt="">
      </nuxt-link>
    </header>

    <div class="content">
      <div class="user-info">
        <nuxt-link :to="{name:'my-personal'}">
          <div class="inner">
            <div class="user-info-img">
              <img :src="userInfo.avatar" alt="">
            </div>
            <div class="user-info-txt flex">
              <h4 class="fx fx-vc">
                <span>{{userInfo.nickname}}</span>
                <img v-if="userInfo.level_icon" :src="userInfo.level_icon" />
              </h4>
              <p>户口号：{{userInfo.user_code}}</p>
            </div>

          </div>
        </nuxt-link>
      </div>
      <div class="order-list">

        <div class="title" @click='goToOrderList("all",0)'>
          <h4>我的订单</h4>
          <div>
            <span>查看全部订单</span>
            <i class="arrow-right"></i>
          </div>
        </div>

        <ul>
          <li  @click='goToOrderList("my_uppay",1) '>
            <img src="~/assets/img/ic_mine_order_pay1.png" alt="">
            <p>待支付</p>
            <span v-if="data.order_unpay!=0">{{data.order_unpay}}</span>
          </li>
          <li @click='goToOrderList("my_uncommit",2)'>
            <img src="~/assets/img/ic_mine_order_sure.png" alt="">
            <p>待确认</p>
            <span v-if="data.order_unconfirm!=0">{{data.order_unconfirm}}</span>
          </li>
          <li @click='goToOrderList("my_doubt",3)'>
            <img src="~/assets/img/ic_mine_order_doubt.png" alt="">
            <p>存疑</p>
            <span v-if="data.order_impeach!=0">{{data.order_impeach}}</span>
          </li>
          <li @click='goToOrderList("my_repay",5)'>
            <img src="~/assets/img/ic_mine_order_pay2.png" alt="">
            <p>已支付</p>
            <span v-if="data.order_pay!=0">{{data.order_pay}}</span>
          </li>
          <li @click='goToOrderList("my_cancellation",6)'>
            <img src="~/assets/img/ic_mine_order_obsolete.png" alt="">
            <p>已作废</p>
            <span v-if="data.order_cancellation!=0">{{data.order_cancellation}}</span>
          </li>
        </ul>
      </div>
      <div class="lists">
        <ul>
          <li>
            <nuxt-link to="/bill">
              <img src="~/assets/img/zhangdan.png" alt="">
              <div class="right">
                <h4>账单</h4>
                <div>
                  <span></span>
                  <i class="arrow-right"></i>
                </div>
              </div>
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/amount">
            <img src="~/assets/img/edushenqing.png" alt="">
            <div class="right">
              <h4>额度申请</h4>
              <div >
                <span v-if="data.my_card_apply_count!=0"><em>{{data.my_card_apply_count}}</em> 笔审核中的额度申请</span>
                <i class="arrow-right"></i>
              </div>
            </div>
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/credit">
              <img src="~/assets/img/edushenhe.png" alt="">
              <div class="right">
                <h4>额度审核</h4>
                <div>
                  <span v-if="data.my_sub_card_apply_count!=0"><em>{{data.my_sub_card_apply_count}}</em>笔待我审核的额度申请</span>
                  <i class="arrow-right"></i>
                </div>
              </div>
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/offline?idx=0">
              <img src="~/assets/img/xiaxian.png" alt="">
              <div class="right">
                <h4>下线</h4>
                <div>
                  <span v-if="data.my_sub!=0"><em>{{data.my_sub}}</em> 条待我审核的下线申请</span>
                  <i class="arrow-right"></i>
                </div>
              </div>
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/docking-people">
            <img src="~/assets/img/duijieren.png" alt="">
            <div class="right">
              <h4>对接人</h4>
              <div>
                <span v-if="data.my_relation!=0"><em>{{data.my_relation}}</em> 条待我审核的对接人申请</span>
                <i class="arrow-right"></i>
              </div>
            </div>
            </nuxt-link>
          </li>
        </ul>
      </div>
    </div>
    <bottom-nav-bar></bottom-nav-bar>
  </div>

</template>

<script>
import Page from '~/components/page';
import UILoading from  "~/components/loading";
import BottomNavBar from '~/components/BottomNavBar.vue';
export default {
  components: {
    Page,
    BottomNavBar,
    [UILoading.name]: UILoading,
  },
  data() {
    return {
      userInfo:{},
      data:{},
      initLoading:true,
    }
  },
  methods: {
    async getData(){
      let { data: rs } = await this.$axios.post('?ct=api&ac=card_stat');
      if(rs.code === 0){
          this.data = rs.data;
        }else{
          this.$toast(rs.msg);
        }
      this.initLoading = false;
    },
    goToOrderList(tab,idx){
      this.$router.push({name:'order',query:{tab:tab,idx:idx}})
    }
  },
  mounted() {
    this.getData();
    this.$nextTick(()=>{
      this.userInfo =this.$store.state.user
    });
    this.$store.dispatch('GET_USER');
  },
}
</script>

<style lang="less" scoped>
  header{
    position: fixed;
    background: #2086f9;
    width:100%;
    height:88px;
    line-height: 88px;
    color:#fff;
    p{
      font-size:36px;
      text-align: center;
      color:#fff;
      font-weight: 400;
    }
    a{
      position: absolute;
      right:30px;
      width:42px;
      height:42px;
      z-index: 999;
      top:23px;
      img{
        width:42px;
        height:42px;
        display: block;

      }
    }
  }
  .content{
    padding-top:88px;
    width:100%;
    .user-info{
      background: url("~assets/img/my-bg.png") no-repeat left center;
      width:100%;
      height:212px;
      background-size:100% 100%;
      padding:0 30px;
      .inner{
        padding-top:10px;
        background: #fff;
        padding:40px 30px;
        display: flex;
        display: -webkit-flex;
        flex-direction:row;
        align-items:center;
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        .user-info-img{
          width:140px;
          height:140px;
          margin-right:20px;
          img{
            width:100%;
            height:100%;
            border-radius: 140px;
          }
        }
        .user-info-txt{
          overflow: hidden;
          h4{
            font-size:32px;
            color:#292929;
            font-weight: normal;
            span {
              .text-ellipsis();
            }
            img {
              display: block;
              margin-left:10px;
              width:68px;
              height:26px;
              overflow: hidden;
              flex-grow:0;
              flex-shrink:0;
            }
          }

          p{
            font-size:28px;
            color:#999;
            margin-top:10px;
          }
        }
      }
    }
    .order-list{
      margin-top:30px;
      background: #fff;
      padding:0 28px;

      .title{
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-between;
        height:80px;
        line-height: 80px;
        border-bottom:1px solid #ededf0;
      }
      h4{
        font-size:30px;
        color:#292929;
        font-weight: normal;
      }
      div{
        text-align: right;
        flex: 1;
        font-size:26px;
        color:#999;
        i{
          background: url("~assets/img/jiantou_right.png") no-repeat left center;
          width:10px;
          height:18px;
          display: inline-block;
          background-size:100%;
        }
      }
      ul{
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content:space-between;
        padding:50px 0;
        li{
          padding:0 20px;
          position: relative;
          img{
            width:60px;
            height:60px;
            display: block;
            margin: 0 auto;
            margin-bottom: 10px;
          }
          p{
            text-align: center;
            color:#333;
            font-size: 26px;
          }
          span{
            position: absolute;
            right:20px;
            top:0px;
            background: #f05521;
            width:30px;
            height:30px;
            text-align: center;
            line-height: 30px;
            color:#fff;
            font-size:18px;
            border-radius: 30px;
          }
        }
      }
    }
    .lists{
      margin-top:20px;
      background: #fff;
      ul{
        li,a{
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          align-items: center;
          line-height: 100px;
          padding:0 0 0 30px;
          width:100%;
          a{padding-left:0;}
          img{
            width:32px;
            height:32px;
            margin-right:30px;
          }
          .right{
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            justify-content: space-between;
            flex: 1;
            border-bottom:1px solid #ededf0;
            padding-right:30px;
            div{
              text-align: right;
              flex: 1;
              font-size: 0.346667rem;
              color: #999;
              em{
                font-style: normal;
                color:#d39b00;
              }
              i{
                background: url("~assets/img/jiantou_right.png") no-repeat left center;
                width: 0.133333rem;
                height: 0.24rem;
                display: inline-block;
                background-size: 100%;
              }
            }
            h4{
              font-size:30px;
              color:#333;
              font-weight: normal;
            }
          }

        }
      }
    }
  }

</style>
